{% extends 'base.html' %}
{# {% from "_macro.html" import pager %} #}
{% import '_macro.html' as pg %}
{% import '_macro.html' as pg2 %}
{% block title %}
    <title>字典编码列表（分页+宏）</title>
{% endblock title %}

{% block crumb %}
    <a class="maincolor" href="#">系统功能</a>
    <span class="c-666 en">&gt;</span>
    <a class="maincolor" href="/list_dict">字典管理（宏分页）</a>
{% endblock crumb %}

{% block content %}
<article class="cl pd-20">
    <!-- 字典类型 -->
    <div class="row">
        <form class="form col-sm-5 col-md-5 col-lg-5" id="form-dict" >
            <!-- 如果有表单 -->
            {# {{ form.csrf_token }} #}
            <!-- 如果没有表单 -->
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />

            <legend class="">字典类型列表</legend>
            <div class="panel panel-default mt-10">
                <a class="btn btn-primary-outline radius f-r size-MINI mr-20 mt-5 va-m" href="{{ url_for('user.new_user') }}">添加</a>
                <a class="btn btn-primary-outline radius f-r size-MINI mr-20 mt-5 va-b" id="ajax-test" href="#">ajax_test</a>
                {% if dicts %}
                <table class="table table-border table-bg table-bordered table-hover">
                    <thead class="text-c">
                        <tr>
                            <th>序号</th>
                            <th>id</th>
                            <th>字段类型</th>
                            <th>使用状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for dict in dicts %}
                        <tr class="dict-id">
                            <td>{{ loop.index + ((pagination.page - 1) * pagination.per_page) }}</td>
                            <td class="dict" value="{{ dict.id }}">{{ dict.id }}</td>
                            <td>{{ dict.name }}</td>
                            <td>{{ dict.isUse }}</td>
                            <td>
                                <div class="cl">
                                    <a class="btn btn-default size-MINI radius f-l" href="{{ url_for('admin.edit_dict', dict_id=dict.id) }}">编辑</a>
                                    <div class="inline f-l" method="post" action="{{ url_for('admin.delete_dict', dict_id=dict.id, next=request.full_path) }}">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                        <button type="submit" class="btn btn-danger-outline size-MINI" onclick="return confirm('确认删除？');">删除</button>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                    <tfoot class="text-c">
                        <tr>
                            <th>序号</th>
                            <th>id</th>
                            <th>字段类型</th>
                            <th>使用状态</th>
                            <th>操作</th>
                        </tr>
                    </tfoot>
                </table>
                {% else %}
                <div class="tip"><h5>没有数据</h5></div>
                {% endif %}
                {{ pg.my_paginate(pagination,url_for('admin.list_dict')) }}
            </div>
        </form>
    </div>
    <!-- 字典代码  -->
    <div class="row">
        <form class="form col-sm-5 col-md-5 col-lg-5 " id="form-code" >
            <!-- 如果有表单 -->
            {# {{ form.csrf_token }} #}
            <!-- 如果没有表单 -->
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />

            <legend class="">字典代码列表</legend>
            <div class="panel panel-default mt-10">
                <a class="btn btn-primary-outline radius f-r size-MINI mr-20 mt-5 va-m" onclick="codesadd()" >添加</a>
                <a class="btn btn-primary-outline radius f-r size-MINI mr-20 mt-5 va-b" id="codetext" href="#">{{ count }}</a>
                {% if codes %}
                <table class="table table-border table-bg table-bordered table-hover">
                    <thead class="text-c">
                        <tr>
                            <th>序号</th>
                            <th>父id</th>
                            <th>字段类型</th>
                            <th>使用状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="codestable">
                    {% for code in codes %}
                        <tr>
                            <td>{{ loop.index + ((cpagination.page - 1) * cpagination.per_page) }}</td>
                            <td>{{ code.typedict_id }}</td>
                            <td>{{ code.name }}</td>
                            <td>{{ code.isUse }}</td>
                            <td>
                                <div class="cl">
                                    <a class="btn btn-default size-MINI radius f-l" href="#">编辑</a>
                                    <div class="inline f-l" method="post" action="#">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                        <button type="submit" class="btn btn-danger-outline size-MINI" onclick="return confirm('确认删除？');">删除</button>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                    <tfoot class="text-c">
                        <tr>
                            <th>序号</th>
                            <th>父id</th>
                            <th>字段类型</th>
                            <th>使用状态</th>
                            <th>操作</th>
                        </tr>
                    </tfoot>
                </table>
                {% else %}
                <div class="tip"><h5>{{ vdata }}</h5></div>
                {% endif %}
                {{ pg2.code_paginate(cpagination,url_for('admin.list_code')) }}
            </div>
        </form>
    </div>
</article>
<div class="modal fade" id="modal-codeadd">
	<div class="modal-dialog">
		<div class="modal-content radius">
			<div class="modal-header">
				<h3 class="modal-title">添加字典代码</h3>
				<a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a>
			</div>
			<div class="modal-body">

                <form class="form form-horizontal" id="form-login" method="POST">

                    <div class="panel panel-default mt-20">
                        <div class="ml-10 cl">
                            <div class="row cl">
                                <label class="form-label col-xs-4 col-sm-3">用户名:</label>
                                <div class="formControls col-xs-5 col-sm-7">
                                    <input type="text" class="input-text" id="name" name="name" autocomplete="off" placeholder="用户名">
                                </div>
                            </div>
                            <div class="row cl">
                                <label class="form-label col-xs-4 col-sm-3">用户账号:</label>
                                <div class="formControls col-xs-5 col-sm-7">
                                    <input type="text" class="input-text" id="username" name="username" autocomplete="off" placeholder="用户帐号">
                                </div>
                            </div>
                            <div class="row cl">
                                <label class="form-label col-xs-4 col-sm-3">电子信箱:</label>
                                <div class="formControls col-xs-5 col-sm-7">
                                    <input type="text" class="input-text" id="email" name="email" autocomplete="off" placeholder="电子信箱">
                                </div>
                            </div>
                            <div class="row cl">
                                <label class="form-label col-xs-4 col-sm-3">用户角色:</label>
                                <div class="formControls col-xs-5 col-sm-7">
                                    <span class="select-box">
                                      <select class="select" size="1" name="role_id">
                                        <option value="1" selected>普通用户</option>
                                        <option value="2">有权用户</option>
                                        <option value="3">系统管理员</option>
                                      </select>
                                    </span>
                                </div>
                            </div>
                            <div class="row cl">
                                <label class="form-label col-xs-4 col-sm-3">用户密码:</label>
                                <div class="formControls col-xs-5 col-sm-7">
                                    <input type="password" class="input-text" id="password" name="password" autocomplete="off" placeholder="用户密码">
                                </div>
                            </div>
                            <div class="row cl">
                                <label class="form-label col-xs-4 col-sm-3">确认密码:</label>
                                <div class="formControls col-xs-5 col-sm-7">
                                    <input type="password" class="input-text" id="password2" name="password" autocomplete="off" placeholder="确认密码">
                                </div>
                            </div>
                            <div class="row cl mb-10">
                                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                                    <input class="btn btn-primary radius" type="submit" value="登录">
                                    <input class="btn btn-default radius ml-10" type="submit" value="取消">
                                </div>
                            </div>
                        </div>
                    </div>
    	        </form>

			</div>
			<div class="modal-footer">
				<button class="btn btn-primary">确定</button>
				<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>
{% endblock content %}

{% block myscript %}
<script type="text/javascript">

    $("table tr").on('click',function(){
        var tr = $(this);
        var td = tr.find("td");
        var fid = td[1].innerHTML;
        // alert("fid=" + fid);
        $.get('api/codes/',{
            'typeid': fid
        },function(data, textStatus){
            $("#codetext").text(data.count);
            // alert("" + data.count);

            var html = "";
            for( var i = 0; i < data.count; i++ ) {
                var k = i + 1;
                html += "<tr>";
                html +=     "<td>" + k + "</td>";
                html +=     "<td>" + data.codes[i].typedict_id + "</td>";
                html +=     "<td>" + data.codes[i].name + "</td>";
                html +=     "<td>" + data.codes[i].isUse + "</td>";
                html +=     "<td>" + '<a class="btn btn-default size-MINI radius f-l" href="#">编辑</a>';
                html += '<button type="submit" class="btn btn-danger-outline size-MINI" onclick="return confirm(' + "'现在确认删除吗？'" + ');">删除</button>';
                html += "</td></tr>";
            }

            $("#codestable").html(html);
        });
    });

    function codesadd(){
      $("#modal-codeadd").modal("show")
    }
    function modalalertdemo() {
      $("body").Huimodalalert({
        content: '我是消息框，2秒后我自动滚蛋！',
        speed: 2000
      })
    }

</script>
{% endblock myscript %}
